<template>
  <div class="hd-top-rt flex flex-end">
    <div
      v-if='userData.isLogin'
      class="opration-wrap flex flex-end"
    >
      <div ref='dropDown' class="drop-down p-rel">
        <span  @click="navigateTo('/property')"  v-text="$t('assets')"></span>
        <ul class="pos_item">
          <li  @click="navigateTo('/property')" >币币账户（充币&提币）</li>
          <li  @click="navigateTo('/property/c2cbalances')" >法币账户</li>
          <!-- <li >币币账户</li> -->
          <!-- <li @click="navigateTo('/property/frbalances')"> 合约</li> -->
        </ul>
      </div>
      <div class="m-left-20 drop-down p-rel" ref='dropDown'>
        <span  @click="navigateTo('/property')"  
        v-text="$t('order')"></span>
        <ul class="pos_item">
          <li @click="navigateTo('/mycenter/transac')">币币订单</li>
          <li @click="navigateTo('/FrTrade/C2CTrade_list')">承兑交易订单</li>
          <li @click="navigateTo('/FabiNew/FBTrade_list')">法币订单</li>
        </ul>
      </div>
      <div class="m-left-20 drop-down p-rel" ref='dropDown'>
        <span>
          <i class="iconfont icon-yonghu fl font-20"></i>
        </span>
        <!-- 用户ID -->
        <ul class="pos_item pos_user" style="top:48px">
          <div>
            <p>ID:<span v-text="userData.member"> </span> </p>
          </div>
          <li @click="navigateTo('/mycenter/security')" class="m-top-10">个人中心</li>
          <!-- <li @click="navigateTo('/mycenter/security')">账户&安全</li> -->
          <li @click="navigateTo('/mycenter/uc_auth')">身份认证</li>
          <li @click="navigateTo('/mycenter/invite')">邀请好友</li>
          <li @click="navigateTo('/mycenter/letradeSet')">法币设置</li>
          <li @click="logout">退出登录</li>
        </ul>
      </div>
      <!-- <div
        ref='dropDown'
        class="drop-down p-rel"
      >
        <span>
          <i class="iconfont icon-yonghu fl font-20"></i>
          <em v-text="userData.member"></em>
          <i class="iconfont icon-xiala fr"></i>
        </span>
        <ul
          :style='{"top":dropDownTop}'
          class="drop-down-item lf-0"
        >
          <li
            v-for='(item,i) in userDropDown'
            :key='i'
            v-text="$t(item.i18nKey)||item.label"
            @click='dropDownHandle(item.link)'
          >
          </li>
          <li
            @click="logout"
            v-text="$t('logout')||'退出登录'"
          ></li>
        </ul>
      </div> -->
    </div>
    <div
      v-else
      class="opration-wrap"
    >
      <span
        @click="navigateTo('/user/login')"
        v-text='$t("login")'
      ></span>
      <button class="top_btn"
        @click="navigateTo('/user/register')"
        v-text="$t('register')"
      ></button>
    </div>
    <!--下载 -->
    <div
      ref="dropDown"
      class="download-app drop-down drop-xiazai p-rel m-left-15"
    >
      <i class="iconfont icon-xiazai "></i>
      <div
          :style='{"top":dropDownTop}'
          class="drop-down-item abs-h-center"
        >
          <span v-text="$t('scanToDownLoad')"></span>
          <vue-qr
            :text="downAppurl"
            :margin="10"
            :size="130"
          >
          </vue-qr>
        </div>
    </div>
    <!-- 主题色设置 -->
    <!-- <div
      ref="dropDown"
      class="download-app m-left-5  p-rel" @click="SetMainColor()"
    >
      <i class="iconfont icon-bangzhuchuangyixiangfaideadengpaofaguang font-16"></i>
    </div> -->
    <!-- <div class="lang-selection drop-down p-rel">
      <span class="flex flex-between flex-v-center">
        <i class="iconfont icon-duoyuyan m-right-10"></i>
        <em v-text='$t("language")'></em>
        <i class="iconfont icon-xiala fr"></i>
      </span>
      <ul
        :style='{"top":dropDownTop}'
        ref='dropDown'
        class="drop-down-item rt-0"
      >
        <li
          v-for="(item,i) in langList.items"
          :key='i'
          v-text="item.label"
          @click='selectLang(i)'
        >
        </li>
      </ul>
    </div> -->
    <el-dialog 
        title="设置颜色"
        :visible.sync="setcolorPop"
        width="30%"
        center
        :append-to-body='append'>
        <el-form ref="form" label-width="80px" label-position="top">
          <div class="padding20">
            <p>设置颜色</p>
          </div>
            <!-- <template>
              <el-radio v-model="radio" label="1" >黑色</el-radio>
              <el-radio v-model="radio" label="2" >白色</el-radio>
            </template> -->
            <changeCor></changeCor>
        </el-form>  
        <span slot="footer" class="dialog-footer">
          <el-button @click="setcolorPop = false">取 消</el-button>
          <el-button type="primary" @click="setTheme()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>
import VueQr from "vue-qr";
import changeCor from '@/components/home/changeCor'
export default {
  name: "login-bar",
  components: { 
    VueQr,
    changeCor,
  },
  data() {
    return {
      userData: this.userModel,
      setcolorPop:false,
      dropDownTop: 30,
      downAppurl:'',
      myOrderDropdown: [
        {
          label: "账单明细",
          i18nKey: "billDetail",
          link: "/my/order_detail"
        },
        {
          label: "我的委托",
          i18nKey: "myEntrustment",
          link: "/my/entrustment"
        },
        {
          label: "交易记录",
          i18nKey: "transRecord",
          link: "/my/deal_history"
        },
        {
          label: "OTC记录",
          i18nKey: "otcRecord",
          link: "/my/otc_history"
        },
        {
          label: "CTC记录",
          i18nKey: "ctcRecord",
          link: "/my/c2c_history"
        }
      ],
      userDropDown: [
        {
          label: "个人中心",
          i18nKey: "label176",
          link: "/my"
        }
      ],
      member: "",
      langList: {
        id: 0,
        items: [
          {
            val: "zh-CN",
            label: "简体中文",
            thumb: ""
          },
          {
            val: "en-US",
            label: "English",
            thumb: ""
          }
        ]
      },
      radio: '1',
      append:true,
      themeList:[
        {
          value: "default",
          label: "默认黑色主题"
        },
        {
          value: "white",
          label: "白色主题"
        },
      ] 
    };
  },
  created() {
    this.downAppurl= `${this.api.downAppurl}`;
    
  },
  mounted() {
    const h = getComputedStyle(this.$refs.dropDown).height;
    this.dropDownTop = h;
    Object.assign(this.userData, { isLogin: this.storage.get("isLogin") });
    if (this.userData.isLogin) {
      this.getUserInfo();
    }
    // this.getVersion();
  },
  methods: {
    dropDownHandle(link) {
      this.navigateTo(link);
    },
    // 获取用户信息
    getUserInfo() {
      if (!this.storage.get("isLogin")) return;
      this.request(this.api.getuserinfo).then(res => {
        console.log(`个人信息:${JSON.stringify(res)}`);
        if (res.code == "0" && res.data) {
          let data = res.data[0];
          this.userData = Object.assign({}, this.userData, {
            balance: res.data.amount * 1,
            ...data
          });
          this.$bus.emit("userLoaded", this.userData);
        } else if(res.code==1) {
          this.storage.remove("token");
          this.storage.set("isLogin", false);
          this.userData.isLogin = false;
          this.storage.set("tradePasswordChecked", false);
          this.$bus.emit("onLogout");
          this.navigateTo("/user/login");
          this.errMsg('登录信息失效');
        }else{
          this.errMsg(res.msg);
        }
      });
    },
    selectLang(i) {
      let val = this.langList.items[i].val;
      let defaultLang = this.storage.get("PCDefaultLanguage");
      if (val == defaultLang) return false;
      let loading = this.$loading({
        text: "切换中...",
        background: "rgba(0, 0, 0, 0.4)"
      });
      setTimeout(() => {
        this.langList.id = i;
        this.$i18n.locale = val;
        this.storage.set("PCDefaultLanguage", val);
        loading.close();
      }, 800);
    },
    logout() {
      this.storage.remove("token");
      this.storage.set("isLogin", false);
      this.userData.isLogin = false;
      this.storage.set("tradePasswordChecked", false);
      this.$bus.emit("onLogout");
      this.navigateTo("Main");
      // this.request(this.api.getuserinfo, {
      //   showLoading: true
      // }).then(res => {
      //   if (res.code == "0") {
      //     this.storage.remove("token");
      //     this.storage.set("isLogin", false);
      //     this.userData.isLogin = false;
      //     this.storage.set("tradePasswordChecked", false);
      //     this.$bus.emit("onLogout");
      //     this.navigateTo("Main");
      //   }
      // });
    },
    //获取二维码
    getVersion(type) {
      if (this.qrUrl) return false;
      this.request(this.api.version, { type: type || 0 }).then(res => {
        if (res.code == "0" && res.data && res.data.result) {
          this.qrUrl = res.data.result[0].url;
          this.$bus.emit("qrCodeLoad", this.qrUrl);
        }
      });
    },
    // 设置主题颜色
    SetMainColor(){ 
      this.setcolorPop=true;
    },
    
    // 切换颜色
    setTheme(){
      console.log(this.radio);
      if(this.radio==1){
        this.theme=this.themeList[0].value;
      }else if(this.radio==2){
        this.theme=this.themeList[1].value;
      }
      document.getElementsByTagName('body')[0].className = 'theme-'+ this.theme;
      // document.getElementById('#appbox')[0].className = 'theme-'+ this.theme;
      // localStorage.setItem('theme',this.theme);
      // const target = this.$refs.app;
      const target =this.$parent.ref;
      console.log(target);
      return
      if (this.theme) {
        target.className ='theme-'+ this.theme;
        // document.getElementById('#appbox').className = 'theme-'+ this.theme;
      } else {
        // 如果刷新页面，则读取 localStorage的值来设置主题
        // target.className = `theme-${localStorage.getItem('theme')}`
        document.getElementsByTagName('body')[0].className = 'theme-'+ this.theme;
      }
      localStorage.setItem('theme',this.theme);
    },
    // changeTheme (theme) {
    //   window.document.documentElement.setAttribute('data-theme', theme)
    // }

  },
  beforeDestroy() {
    this.$bus.off("qrCodeLoad");
  },
  

};
</script>
<style lang="scss" scoped>
$default-color: #fff;
$ml: 25px;
.hd-top-rt {
  box-sizing: border-box;
  height: inherit;
  text-align: right;
  cursor: pointer;
  color: $default-color;
  .lang-selection {
    display: inline-block;
    margin-left: $ml;
  }
  .iconfont {
    margin: 0 4px;
  }
  .top_btn {
    box-sizing: border-box;
    padding: 0 10px;
    height: 24px;
    line-height: 22px;
    border: 1px solid #357ce1;
    border-radius: 4px;
    margin-left: 20px;
    cursor: pointer;
  }
  .opration-wrap {
    height: inherit;
    margin-left: 0px;
  }
}
.drop-down {
  margin-left: $ml;color: #b0b8db;
  &:first-child {
    margin: 0;
  }
  i {
    font-size: 18px;
    @media screen and (max-width: 1366px) {
      font-size: $font-default;
    }
  }
  &:hover {
    color: #ffffff;
    .drop-down-item {
      display: block;
    }
    .pos_item{
      display: block;
    }
  }
  .drop-down-item {
    font-size: $font-default;
    @media screen and (max-width: 1366px) {
      font-size: $font-mini;
    }
    position: absolute;
    z-index: 100;
    white-space: nowrap;
    min-width: 100%;
    background: $bg-dark;
    display: none;
    li {
      @include textVcenter;
      color: #fff;
      transition: all 0.3s;
      text-align: left;
      padding: 0 40px 0 20px;
      &:hover {
        background: $main-bg-color;
      }
    }
  }
  .pos_item{
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(28,36,44,.12);
    border-radius: 2px;
    min-width: 130px;
    max-width: 220px;position: absolute;left: -32px;text-align: left;z-index: 999;display: none;
    li{
      min-width: 180px;height: 20px;line-height: 20px;color: #2b3d4a;padding: 10px 12px;
      &:hover{color: #357ce1; background: #f1f4f5;}
    }
  }
  .pos_user{
    width: 220px;
    left: -20px;
    top: 44px;
    position: absolute;z-index: 999;
    -webkit-box-shadow: 0 2px 20px 0 rgba(0,0,0,.14);
    box-shadow: 0 2px 20px 0 rgba(0,0,0,.14);
    background: #fff url(../../assets/images/user/hb_top.png) no-repeat top/220px 390px;
    border-radius: 2px;
    overflow: hidden;
    padding-bottom: 16px;
    display: none;
    p{color: #2b3d4a;margin-left: 15px;}
  }
}
.download-app {
  .drop-down-item {
    line-height: 30px;
    padding: 0 10px 10px 10px;
    text-align: center;
    width: 150px;
    img {
      display: block;
      width: 100%;
    }
  }
}
.drop-xiazai{
  margin-left: 10px;
  i{font-size: 19px!important;}
}
#content{
  p{line-height: 30px;border: 1px solid #357ce1;margin-top: 10px;cursor: pointer;}
}
.padding20{padding: 20px 0;}

</style>

